<template>
  <div>
    <div class="sell-detail">
      <div class="hint">
        <div class="title">温馨提示：</div>
        <div v-html="info.hint"></div>
      </div>
      <!-- 商品名称 -->
      <div class="title">
        <div class="left">
          <span class="text blue">{{info.name}}</span>
          <span class="v-line"></span>
          <span class="text">{{info.suffix_name}}</span>
        </div>
        <div class="right">
          <span class="text red">¥{{info.final_price}}</span>
          <img src="/src/assets/icons/help-blue.png" @click="priceAlert">
        </div>
      </div>
      <!-- 成本 -->
      <div class="pos-r">
        <mt-field label="权益获得成本：" :placeholder="`¥${info.cost}`" v-model="cost" type="number"></mt-field>
        <img src="/src/assets/icons/help-blue.png" class="helper" @click="costAlert">
      </div>
      <!-- 券 -->
      <div class="ticket" v-for="v in num" :key="v">
        <label class="label">
          {{codeName[v]}}
          <img src="/src/assets/icons/trash.png" alt="删除" @click="removeTicket(v - 1)">
        </label>
        <div class="field">
          <div class="item" v-if="needImg">
            <div class="title">
              <span class="text">{{info.qrcode_rename === '' ? '上传二维码：' : `${info.qrcode_rename}：`}}</span>
              <img src="/src/assets/icons/help-blue.png" @click="imageAlert">
            </div>
            <div class="value">
              <!-- <input type="text" class="text-input" placeholder="点击上传" readonly :value="saveList[Number(v) - 1].image"> -->
              <input type="text" class="text-input" placeholder="点击上传" readonly v-model="saveList[v - 1].uploadRes">
              <input type="file" name="file" class="file-input" @change="uploads($event, v)">
              <img src="/src/assets/icons/qrcode.png">
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span class="text">{{info.imei_rename === '' ? '兑换码：' : `${info.imei_rename}：`}}</span>
              <img src="/src/assets/icons/help-blue.png" @click="imeiAlert">
            </div>
            <div class="value">
              <input type="text" class="text-input" placeholder="请输入兑换码" v-model="saveList[v - 1].imei"  @focus="focusAndroid($event)">
            </div>
          </div>
          <div class="item" v-if="needPwd">
            <div class="title">
              <span class="text">{{info.pwd_rename === '' ? '密码：' : `${info.pwd_rename}：`}}</span>
            </div>
            <div class="value">
              <input type="text" class="text-input" placeholder="请输入密码" v-model="saveList[v - 1].pwd"  @focus="focusAndroid($event)">
            </div>
          </div>
          <div class="item" @click="showPicker(`deadTime${v}`)" v-if="needTime">
            <div class="title">
              <span class="text">有效期(含当天)：</span>
            </div>
            <div class="value">
              <input type="text" class="text-input" placeholder="填错日期，无法回款" readonly :value="saveList[Number(v) - 1].deadTime">
              <img src="/src/assets/icons/calendar.png">
            </div>
          </div>
        </div>
      </div>
      <!-- 日期 -->
      <mt-datetime-picker ref="deadTime1" type="date" class="month-day"
        year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
        v-model="datePicker1" :startDate="startDate"
      ></mt-datetime-picker>
      <mt-datetime-picker ref="deadTime2" type="date" class="month-day"
        year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
        v-model="datePicker2" :startDate="startDate"
      ></mt-datetime-picker>
      <mt-datetime-picker ref="deadTime3" type="date" class="month-day"
        year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
        v-model="datePicker3" :startDate="startDate"
      ></mt-datetime-picker>
      <mt-datetime-picker ref="deadTime4" type="date" class="month-day"
        year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
        v-model="datePicker4" :startDate="startDate"
      ></mt-datetime-picker>
      <mt-datetime-picker ref="deadTime5" type="date" class="month-day"
        year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
        v-model="datePicker5" :startDate="startDate"
      ></mt-datetime-picker>
      <!-- 新增券 -->
      <mt-button @click.native="addTicket">
        <img slot="icon" src="/src/assets/icons/add.png">
        增加新券
      </mt-button>
      <!-- 发布 -->
      <footer class="footer-button">
        <mt-button @click.native="sendSms">立即发布</mt-button>
      </footer>
      <!-- 用户手机号绑定 -->
      <mobile-bind ref="mobileBind" @sendSms="sendSms"></mobile-bind>
      <!-- 确认弹窗 -->
      <div class="confirm-goods" v-show="alertShow" @click="closeAlert">
        <div class="body">
          <div class="title">确认上传商品</div>
          <div class="content">
            <span>{{info.name}}-{{info.suffix_name}}</span>
            <img :src="`/src/assets/user-center/circle${alertCheck ? '-full': ''}.png`" @click.stop="alertChoose">
            <p class="red">如有相似商品，传错导致的纠纷无法回款</p>
          </div>
          <div class="btn-group">
            <div class="btn" @click.stop="closeAlert">传错了</div>
            <div class="v-line"></div>
            <div class="btn" :class="{blue: alertCheck}" @click.stop="confirmGoods">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'
  import MobileBind from '@/components/MobileBind'

  export default {
    name: 'SellDetail',
    components: {
      MobileBind
    },
    data () {
      return {
        info: {},
        num: 1,
        datePicker1: '',
        datePicker2: '',
        datePicker3: '',
        datePicker4: '',
        datePicker5: '',
        cost: '',
        codeName: {1: '券一', 2: '券二', 3: '券三', 4: '券四', 5: '券五'},
        // 提示
        imeiHint: '',
        qrcodeHint: '',
        // 检测属性必要
        needTime: false,
        needPwd: false,
        needImg: false,
        // 参数
        saveList: [
          {image: '', imei: '', imei2: '', pwd: '', deadTime: '', uploadRes: ''}
        ],
        codeIndex: 0,
        startDate: new Date(),
        uploadRes: '',
        // 弹窗
        alertShow: false,
        alertCheck: false
      }
    },
    watch: {
      datePicker1 (v) {
        if (this.needTime && this.saveList.length > 0) {
          this.saveList[0].deadTime = `${v.getFullYear()}/${v.getMonth() + 1}/${v.getDate()}`
        }
      },
      datePicker2 (v) {
        if (this.needTime && this.saveList.length > 1) {
          this.saveList[1].deadTime = `${v.getFullYear()}/${v.getMonth() + 1}/${v.getDate()}`
        }
      },
      datePicker3 (v) {
        if (this.needTime && this.saveList.length > 2) {
          this.saveList[2].deadTime = `${v.getFullYear()}/${v.getMonth() + 1}/${v.getDate()}`
        }
      },
      datePicker4 (v) {
        if (this.needTime && this.saveList.length > 3) {
          this.saveList[3].deadTime = `${v.getFullYear()}/${v.getMonth() + 1}/${v.getDate()}`
        }
      },
      datePicker5 (v) {
        if (this.needTime && this.saveList.length > 4) {
          this.saveList[4].deadTime = `${v.getFullYear()}/${v.getMonth() + 1}/${v.getDate()}`
        }
      }
    },
    methods: {
      getGoodsInfo () {
        let params = {act_gid: this.$route.params.id}
        this.$post('/vue/goods/sell_goods', params).then(data => {
          this.info = data
          // 提醒
          this.imeiHint = data.imei_hint
          this.qrcodeHint = data.qrcode_hint
          // 显示
          this.needTime = Boolean(Number(data.if_need_dead_time))
          this.needPwd = Boolean(Number(data.if_need_pwd))
          this.needImg = Boolean(Number(data.if_need_qrcode))
          window.document.title = `${data.name}-${data.suffix_name}`
        })
      },
      uploads (event, index) {
        let file = event.target.files[0]
        let formdata = new FormData()
        formdata.append('file', file)
        formdata.append('type', 'sell')
        formdata.append('act_gid', this.info.id)
        this.$post('/vue/upload/index', formdata).then(data => {
          msg('上传成功')
          this.saveList[Number(index) - 1].uploadRes = '上传成功'
          this.saveList[Number(index) - 1].image = data
          // 串码解析
          this.qrcodeToImei(data, index)
        })
      },
      qrcodeToImei (img, index) {
        let params = {image: img, 'act_gid': this.info.id}
        this.$post('/qrcode/index.php', params).then(data => {
          this.saveList[Number(index) - 1].imei = data
          this.saveList[Number(index) - 1].imei2 = data
        })
      },
      showPicker (field) {
        this.$refs[field].open()
      },
      priceAlert () {
        const content = `
          <div style="text-align:left;">
            <p>此商品的基准收购价格是：¥ <span style="color:#ff8162;">${this.info.buy_price}</span></p>
            <p>根据您的信用分，惠权益给予您的收购价格是：¥ <span style="color:#ff8162;">${this.info.final_price}</span></p><br>
            <p>Q：如何获取信用分？</p>
            <p>A：提升信用分有两个渠道：</p>
            <p>第一，是在平台上做交易，按照出售的笔数和金额，经过运算，系统会赋予用户相应的信用分值，多交易、多累积；</p>
            <p>第二，是为平台邀请新用户，按照邀请用户数量和被邀请用户未来的交易表现，系统会赋予用户相应的信用分值，多邀请、多累积。</p>
          </div>`
        MessageBox.alert(content, '温馨提示', {closeOnClickModal: true})
      },
      costAlert () {
        const content = `此处您可填写获得本权益的大概成本，日后方便计算您在平台上的正收益`
        MessageBox.alert(content, '温馨提示', {closeOnClickModal: true})
      },
      imageAlert () {
        MessageBox.alert(this.qrcodeHint, '温馨提示', {closeOnClickModal: true})
      },
      imeiAlert () {
        MessageBox.alert(this.imeiHint, '温馨提示', {closeOnClickModal: true})
      },
      addTicket () {
        if (this.num >= 5) {
          msg('最多添加5张券')
          return false
        }
        // 检测
        let params = {
          act_gid: this.$route.params.id,
          cost: this.cost || this.info.cost,
          params: this.saveList
        }
        this.$post('/vue/goods/can_save', params).then(data => {
          this.num++
          this.saveList.push({image: '', imei: '', imei2: '', pwd: '', deadTime: '', uploadRes: ''})
        })
      },
      removeTicket (index) {
        if (this.num <= 1) {
          msg('请保留至少一个券')
          return false
        }
        MessageBox.confirm('确定要删除么？删除后您需要重新填写！', '温馨提示').then(action => {
          if (action === 'confirm') {
            this.num--
            this.saveList.splice(index, 1)
          }
        })
      },
      sendSms () {
        this.$post('/vue/goods/check_user_phone', '').then(data => {
          if (data === 'need_phone') {
            this.$refs.mobileBind.popShow = true
          } else {
            this.save()
          }
        })
      },
      save () {
        let alertArr = [
          1, 11, 70, 80, 81, 82, 85, 86, 87, 88, 130, 142, 143, 144, 145, 158, 173, 211, 219, 220,
          253, 255, 261, 276, 347, 356, 383, 385, 408, 427, 435,
          445, 448, 449, 457, 460, 464, 467, 473, 482, 498, 505
        ]
        if (alertArr.indexOf(Number(this.$route.params.id)) === -1) {
          let params = {
            act_gid: this.$route.params.id,
            cost: this.cost || this.info.cost,
            params: this.saveList
          }
          this.$post('/vue/goods/save_batch', params).then(data => {
            msg('发布成功')
            setTimeout(() => {
              this.$router.push({name: 'Sell', params: {tab: 1}, query: {home: 3}})
            }, 2000)
          })
        } else {
          this.showAlert()
        }
      },
      alertChoose () {
        this.alertCheck = !this.alertCheck
      },
      showAlert () {
        this.alertShow = true
      },
      closeAlert () {
        this.alertCheck = false
        this.alertShow = false
      },
      confirmGoods () {
        if (!this.alertCheck) {
          return false
        }
        this.closeAlert()
        let params = {
          act_gid: this.$route.params.id,
          cost: this.cost || this.info.cost,
          params: this.saveList
        }
        this.$post('/vue/goods/save_batch', params).then(data => {
          msg('发布成功')
          setTimeout(() => {
            this.$router.push({name: 'Sell', params: {tab: 1}, query: {home: 3}})
          }, 2000)
        })
      },
      // focus 安卓兼容
      focusAndroid (e) {
        if (e.target.getBoundingClientRect().top < document.documentElement.clientHeight) {
          e.target.scrollTop = document.documentElement.clientHeight / 2
        }
      }
    },
    mounted () {
      this.getGoodsInfo()
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-53: rgb(53, 53, 53);
  @c-124: rgb(124, 124, 124);
  @c-150: rgb(150, 150, 150);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-light-blue: rgb(240, 244, 247);
  @c-orange: rgb(245, 166, 35);

  .sell-detail {
    padding: 12px 12px 0;
    background-color: @c-light-blue;
    text-align: left;
    height: calc(~'100vh - 70px');
    overflow-x: hidden;
    overflow-y: scroll;
    .hint {
      font-size: 12px;
      .title　{
        color: @c-orange;
        line-height: 24px;
        margin: 0;
      }
      p {
        line-height: 20px;
        color: @c-169;
      }
    }
    .title {
      margin: 12px 0;
      display: flex;
      .text {
        font-size: 16px;
        line-height: 32px;
        color: @c-169;
        font-weight: bold;
        &.blue {
          color: @c-blue;
        }
        &.red {
          color: @c-red;
        }
      }
      .left {
        width: 70%;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        align-content: center;
      }
      .right {
        width: 30%;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: flex-end;
      }
      .v-line {
        display: block;
        margin: 0 8px;
        background-color: @c-226;
        width: 1px;
        height: 24px;
      }
      img {
        width: 24px;
        height: 24px;
        margin-left: 8px;
      }
    }
    .mint-cell {
      min-height: 48px;
      margin: 12px 0;
      color: @c-124;
      border-radius: 24px;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
      .mint-cell-wrapper {
        font-size: 12px;
        padding: 0 16px;
        text-align: left;
        background-size: 100% 0px;
        .mint-cell-title {
          .mint-cell-text {
            line-height: 24px;
          }
        }
        .mint-cell-value {
          .mint-field-core {
            color: @c-blue;
            text-align: right;
            &::-webkit-input-placeholder {
              font-size: 12px;
              color: @c-169;
            }
          }
          .mint-field-other {
            img {
              width: 24px;
              height: 24px;;
              &.big {
                width: 48px;
                height: 48px;
                margin-right: -16px;
              }
            }
          }
        }
      }
    }
    .pos-r {
      position: relative;
      .helper {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 12px;
        left: 100px;
      }
    }
    .ticket {
      .label {
        display: block;
        padding: 12px;
        font-size: 13px;
        font-weight: bold;
        line-height: 24px;
        color: @c-124;
        img {
          width: 24px;
          height: 24px;
          float: right;
        }
      }
      .field {
        padding: 0 12px;
        color: @c-124;
        border-radius: 24px;
        background-color: #FFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
        .item {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid @c-235;
          .title {
            flex: 0 0 auto;
            width: 40%;
            margin: 0;
            display: flex;
              .text {
              font-size: 12px;
              line-height: 24px;
              color: @c-124;
              font-weight: normal;
            }
          }
          .value {
            flex: 0 0 auto;
            width: 60%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: relative;
            .text-input {
              width: 100%;
              border: 0;
              font-size: 12px;
              line-height: 24px;
              color: @c-blue;
              text-align: right;
              &::-webkit-input-placeholder {
                color: @c-169;
              }
            }
            img {
              margin-left: 8px;
            }
            .file-input {
              position: absolute;
              width: 100%;
              opacity: 0;
            }
          }
          img {
            width: 24px;
            height: 24px;
            margin: 0;
          }
        }
      }
    }
    .mint-button {
      width: 100%;
      height: 48px;
      margin: 12px 0;
      color: @c-124;
      border-radius: 24px;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
      background-color: #FFF;
      .mint-button-icon {
        line-height: 0;
      }
      .mint-button-text {
        font-size: 13px;
        line-height: 24px;
        color: @c-169;
      }
      img {
        width: 24px;
        height: 24px;
      }
    }
    .footer-button {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      background-color: #FFF;
      text-align: center;
      .mint-button {
        height: 40px;
        padding: 7px 0;
        margin: 8px;
        width: 168px;
        text-align: center;
        background-color: #6cb8de;
        border-radius: 20px;
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
        }
      }
    }
    .mint-datetime {
      width: 100vw;
    }
    .confirm-goods {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: rgba(0, 0, 0, 0.5);
      .body {
        width: 72vw;
        height: 49.33vw;
        background-color: @c-235;
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        .title {
          font-size: 17px;
          line-height: 24px;
          color: rgb(3, 3, 3);
          text-align: center;
          display: block;
          margin: 15px 0 5px;
        }
        .content {
          font-size: 13px;
          line-height: 24px;
          display: flex;
          justify-content: space-between;
          padding: 15px;
          color: @c-53;
          flex-wrap: wrap;
          border-bottom: 1px solid rgba(53, 53, 53, 0.25);
          span {
            flex: 0 0 80%;
          }
          img {
            width: 24px;
            height: 24px;
          }
          .red {
            color: @c-red;
            flex: 0 0 100%;
            margin-top: 20px;
            font-size: 12px;
            line-height: 22px;
          }
        }
        .btn-group {
          height: 12vw;
          display: flex;
          align-items: center;
          .btn {
            flex: 1;
            display: block;
            text-align: center;
            font-size: 17px;
            line-height: 24px;
            color: @c-169;
            &.blue {
              color: @c-blue;
            }
          }
          .v-line {
            width: 1px;
            height: 95%;
            background-color: @c-226;
          }
        }
      }
    }
  }
  .mint-msgbox-wrapper {
    .mint-msgbox-content {
      .mint-msgbox-message {
        font-size: 13px;
        line-height: 24px;
      }
    }
  }
</style>